<template>
  <view class="certificate-counter">
    <view>
      <view class="certificate-title">技能证书</view>
      <view class="certificate-content-counter">
        <view class="content-items-main">
          <view class="content-explain">
            <text class="iconfont icon-upload-cloud-fill"></text>
            <text class="upload-text">去上传</text>
            <view class="none-upload-status">未上传</view>
          </view>
          <view class="items-title">高工作业证</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.certificate-counter {
  background: #fff;
  padding: 24rpx;
  .certificate-title {
    font-size: 32rpx;
    font-size: #333;
    font-weight: 500;
  }
  .certificate-content-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30rpx;
    margin-top: 24rpx;
    .content-items-main {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      align-items: center;
      .content-explain {
        width: 330rpx;
        height: 170rpx;
        background: #f3f3f3;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6rpx;
        position: relative;
        .icon-upload-cloud-fill {
          font-size: 58rpx;
          color: #a5a5a5;
        }
        .upload-text {
          font-size: 26rpx;
          color: #999;
        }
        .none-upload-status {
          position: absolute;
          padding: 8rpx 10rpx;
          background: #d3d3d3;
          color: #fff;
          font-size: 24rpx;
          border-radius: 0 16rpx 0 16rpx;
          top: 0;
          right: 0;
        }
      }
      .items-title {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}
</style>
